import { BasePage } from '@common/components/base-page'
import NavigationBar from '@components/navBar'
import { AtList, AtListItem } from 'taro-ui'
import { View, Text, Image, Input, Button, ScrollView, Picker } from '@tarojs/components'
import Jump from '@utils/jump'
import AppRoute from '@utils/route/index'
import Taro from '@tarojs/taro'
import PickerAddress from '@components/picker-address'
import IQRequest from '@common/iq-request/request'
import userAvatar from '../../../assets/img/user-avatar.png'
import link from '../../../assets/img/link.png'
import camera from '../../../assets/img/camera.png'
import required from '../../../assets/img/required.png'
import "taro-ui/dist/style/components/tabs.scss";
import "taro-ui/dist/style/components/list.scss";
import style from './index.module.scss'

interface IProps {
    tabList: any
    tabPlatform?: boolean
}
interface IState {
    current: number,
    currentIdentity: string,
    currentBrand: number,
    clickedSelectPanel: boolean,
    currentSex: number,
    brandList: any,
    currentParentIndex: number,
    date: string,
    nickname: string,
    realName: string,
    gender: any,
    selectLocation: number,
    locationName: string
    // tabList: any
}
export default class UserInfo extends BasePage<IProps, IState> {
    constructor(props) {
        super(props);
        this.state = {
            current: 0,
            currentIdentity: '',
            currentBrand: 0,
            clickedSelectPanel: false,
            currentSex: 0,
            brandList: [],
            selectLocation: 0,
            locationName: '',
            date: '',
            nickname: '',
            realName: '',
            gender: [{ title: '男', key: 1 }, { title: '女', key: 2 }],
            currentParentIndex: 0
        }
    }
    async componentDidShow() {
        await IQRequest.VIVORequest('/api/v1/group/list', { group_id: 0 }, { method: 'GET' }).then((response: any) => {
            this.setState({
                brandList: response.data.item,
                currentBrand: response.data.item[0].id
            })
            // Taro.setStorageSync('postThreadInfo', response)
            // Taro[info.type || 'navigateTo']({
            //     url: info.url + paramsStr
            // })
        })

    }
    handleClick = (e) => {
        this.setState({
            current: e,
        })
        console.log(e, '点击了tab页')
    }
    handleIdentityClick = (e) => {
        this.setState({
            currentIdentity: e,
        })
    }
    getselectCode = (code,name) => {
        this.setState({
            selectLocation: code,
            locationName:name

        })
        console.log(code, '获取常驻位置的code')
    }
    handleBrandClick = (e, index) => {
        this.setState({
            currentBrand: e,
            currentParentIndex: index
        })
    }
    handleSexClick = (e) => {
        this.setState({
            currentSex: e
        })
    }
    closeMediaChange = (plat) => {
        console.log(plat, '选择的地区')
        this.setState({
            // selectedPlat: plat.title,
            clickedSelectPanel: false
        })
    }
    handleAddress = async () => {
        this.setState({
            clickedSelectPanel: true
        })
        console.log('选择所在地区')
    }
    handleUploadAvatar = () => {
        // 上传头像
        Taro.chooseImage({
            success(res) {
                console.log(res, '上传图像成功回调')
            }
        })
    }
    handleInputRealName = (e) => {
        this.setState({
            realName: e.detail.value
        })
    }
    handleInputNickName = (e) => {
        this.setState({
            nickname: e.detail.value
        })
    }
    onDateChange = (e) => {
        this.setState({
            date: e.detail.value
        })
    }
    saveUserInfo = async () => {
        // 保存用户信息
        const val = "avatar/202407/19/avatar-669a0fb03e2f9.png"
        let form = {
            nickname: this.state.nickname,
            name: this.state.realName,
            gender: this.state.currentSex,
            birthday: this.state.date,
            avatar: val,
            // 品牌身份id
            group_id: this.state.currentIdentity,
            // 常驻位置
            location_id: this.state.selectLocation
        }
        let userParam = {
            is_first: 1,
            ...form
        }
        await IQRequest.VIVORequest('/api/v1/user', { body: userParam }, { method: 'GET' }).then((response: any) => {
            if(response.code===10000){
                Taro.showToast({
                    title: '保存成功',
                    icon: 'none'
                })
                setTimeout(()=>{
                    Jump.jump({ url: AppRoute.APP.USER ,type: 'reLaunch'})
                },1000)
            }
        })
    }
    render() {
        const { brandList, currentParentIndex } = this.state
        return (
            <>
                <ScrollView style={{ height: '100vh' }} enhanced={true} scrollY={true}>
                    <NavigationBar backPageShow={true} titleColor="black" barBackgroundColor='white' title="完善个人信息"></NavigationBar>
                    <View className={style.userCon}>
                        <View className={style.baseInfo}>
                            <View onClick={this.handleUploadAvatar} className={style.imgBox}>
                                <Image className={style.userAvatar} src={userAvatar}></Image>
                                <Image className={style.camera} src={camera} ></Image>
                            </View>
                            <View className={style.bottom}>
                                <View className={style.brand}>
                                    <Text>选择品牌</Text>
                                    <Image className={style.required} src={required}></Image>
                                </View>
                                {/* <View className={style.items}>
                                <Text>vivo</Text>
                            </View> */}
                                <View className={style.tabs}>
                                    {
                                        brandList && brandList?.map((item, index) => {
                                            if (item.children !== undefined && item.children.length !== 0) {
                                                return (
                                                    <View className={this.state.currentBrand === item.id ? style.viewActive : ''} onClick={this.handleBrandClick.bind(this, item.id, index)} key={item.id}>{item.name}</View>
                                                )
                                            }
                                        })
                                    }
                                </View>
                            </View>
                            {
                                brandList[currentParentIndex]?.children !== undefined && brandList[currentParentIndex]?.children?.length !== 0 &&
                                <View className={style.bottom}>
                                    <View className={style.brand}>
                                        <Text>品牌身份</Text>
                                        <Image className={style.required} src={required}></Image>
                                    </View>
                                    <View className={style.tabs}>
                                        {
                                            brandList[currentParentIndex] ?
                                                brandList[currentParentIndex]?.children?.map(item => {
                                                    return (
                                                        <View className={this.state.currentIdentity === item.id ? style.viewActive : ''} onClick={this.handleIdentityClick.bind(this, item.id)} key={item.id}>{item.name}</View>
                                                    )
                                                }) : null
                                        }
                                    </View>
                                </View>
                            }

                            <View className={style.bottom}>
                                <View className={style.brand}>
                                    <Text>昵称</Text>
                                    <Image className={style.required} src={required}></Image>
                                </View>
                                <Input onInput={this.handleInputNickName} value={this.state.nickname} type="text" className={style.input} placeholder='请输入昵称' placeholderClass={style.place}></Input>
                            </View>
                            <View className={style.bottom}>
                                <View className={style.brand}>
                                    <Text>姓名</Text>
                                    <Image className={style.required} src={required}></Image>
                                </View>
                                <Input onInput={this.handleInputRealName} value={this.state.realName} type="text" className={style.input} placeholder='请输入姓名' placeholderClass={style.place}></Input>
                            </View>
                            <View className={style.bottom}>
                                <View className={style.brand}>
                                    <Text>性别</Text>
                                    <Image className={style.required} src={required}></Image>
                                </View>
                                <View className='tabs'>
                                    <View className={style.tabs}>
                                        {
                                            this.state.gender.map(item => {
                                                return (
                                                    <View className={this.state.currentSex === item.key ? style.viewActive : ''} onClick={this.handleSexClick.bind(this, item.key)} key={item.key}>{item.title}</View>
                                                )
                                            })
                                        }
                                    </View>
                                </View>
                            </View>
                            <View className={style.bottom}>

                                <View className={style.brand}>
                                    <Text>生日</Text>
                                    <Image className={style.required} src={required}></Image>
                                </View>
                                <Picker mode='date' onChange={this.onDateChange}>
                                    <AtList>
                                        <Input value={this.state.date} type="text" className={style.input} placeholder='请选择生日' placeholderClass={style.place}></Input>
                                    </AtList>
                                </Picker>
                            </View>
                            <View className={style.bottom}>
                                <View className={style.brand}>
                                    <Text>常驻位置</Text>
                                    <Image className={style.required} src={required}></Image>
                                </View>
                                <Input value={this.state.locationName} onClick={this.handleAddress} type="text" className={style.input} placeholder='省市区县、乡镇等' placeholderClass={style.place}></Input>
                            </View>
                        </View>
                        <View className={style.baseInfo} style="padding-bottom:54rpx !important;">
                            <View className={style.bottom}>
                                <View className={style.brand}>
                                    <Text>邀请码</Text>
                                </View>
                                <Input type="text" className={style.input} placeholder='请填写八位邀请码' placeholderClass={style.place}></Input>
                            </View>
                        </View>
                        <View className={style.addMediaBtn}>
                            <View onClick={() => { Jump.jump({ url: AppRoute.MODULES.AddMEDIA }) }}>
                                <Image src={link}></Image>
                                <Text>添加社媒账号</Text>
                            </View>
                        </View>
                    </View>
                    <View className={style.footer}>
                        <View onClick={this.saveUserInfo} className={style.btn}>
                            <Button>保存</Button>
                        </View>
                    </View>
                    <PickerAddress getselectCode={this.getselectCode} level={2} selectMedia={this.state.clickedSelectPanel} title="常驻位置" close={this.closeMediaChange} />
                </ScrollView>
            </>
        )
    }
}